<!-- Researchopia 偏好设置面板 - XUL/XHTML 片段 -->
<!-- 根据 Zotero 文档，偏好面板应该是片段，不需要 <?xml> 声明和根窗口元素 -->
<linkset>
  <html:link rel="stylesheet" href="preferences.css" xmlns:html="http://www.w3.org/1999/xhtml"/>
</linkset>

<!-- Scripts are loaded via preferences.js file -->
<vbox data-researchopia="true">
  <groupbox>
    <label><html:h2 id="researchopia-title-header">🔬 研学港 Researchopia</html:h2></label>
    <html:p class="description">开放的学术交流和共享平台。研学并进,智慧共享 | Where Research Meets Community</html:p>

    <!-- 账户设置 -->
    <groupbox>
      <label><html:h2>👤 账户设置</html:h2></label>

      <!-- 登录容器 - 直接显示登录界面 -->
      <html:div id="researchopia-login-container">
        <!-- 登录表单 -->
        <html:div class="login-form" id="login-form-section">
          <html:h3>连接到研学港</html:h3>
          <html:p class="login-description">登录以使用所有功能</html:p>
          <html:div class="form-group" style="display: flex; align-items: center; gap: 8px;">
            <html:label for="email-input">邮箱地址:</html:label>
            <html:input type="email" id="email-input" placeholder="your.email@example.com" />
            <html:a href="javascript:void(0)" onclick="Zotero.launchURL('https://www.researchopia.com/')" id="create-account" style="flex-shrink: 0; color: var(--accent-blue); text-decoration: none; font-size: 12px; white-space: nowrap; cursor: pointer;">创建账户</html:a>
          </html:div>
          <html:div class="form-group" style="display: flex; align-items: center; gap: 8px;">
            <html:label for="password-input">密码:</html:label>
            <html:input type="password" id="password-input" placeholder="请输入您的密码" />
            <html:a href="javascript:void(0)" onclick="Zotero.launchURL('https://www.researchopia.com/')" id="forgot-password" style="flex-shrink: 0; color: var(--accent-blue); text-decoration: none; font-size: 12px; white-space: nowrap; cursor: pointer;">忘记密码</html:a>
          </html:div>
          <html:div class="form-group">
            <html:label class="checkbox-label">
              <html:input type="checkbox" id="remember-credentials" />
              <html:span>记住账号密码</html:span>
              <html:small>下次登录自动填充账号和密码</html:small>
            </html:label>
          </html:div>
          <html:div class="form-actions">
            <html:button id="login-btn" class="researchopia-btn primary">
              <html:span class="btn-text">登录</html:span>
              <html:span class="btn-loading" style="display: none;">登录中...</html:span>
            </html:button>
          </html:div>
          <html:div id="login-message" class="message"></html:div>
        </html:div>
        
        <!-- 已登录状态 -->
        <html:div class="logged-in-status" id="logged-in-section" style="display: none;">
          <html:h3>已连接到研学港</html:h3>
          <html:div class="user-info">
            <html:div class="user-details">
              <html:div class="user-name">
                <html:strong>用户名: </html:strong>
                <html:span id="user-name-display">--</html:span>
              </html:div>
              <html:div class="user-email">
                <html:strong>邮箱: </html:strong>
                <html:span id="user-email-display">--</html:span>
              </html:div>
              <html:div class="login-time">
                <html:strong>登录时间: </html:strong>
                <html:span id="login-time-display">--</html:span>
              </html:div>
            </html:div>
            <html:div class="user-actions">
              <html:button id="logout-btn" class="researchopia-btn danger">
                <html:span class="btn-text">登出</html:span>
                <html:span class="btn-loading" style="display: none;">登出中...</html:span>
              </html:button>
            </html:div>
          </html:div>
          <html:div id="status-message" class="message"></html:div>
        </html:div>
      </html:div>
    </groupbox>

    <!-- 开发者选项 -->
    <groupbox>
      <label><html:h2>🔧 开发者选项</html:h2></label>
      <html:div class="form-group">
        <html:label class="checkbox-label">
          <html:input type="checkbox" id="use-dev-environment" />
          <html:span>⚠️ 使用开发环境 API</html:span>
          <html:small>开发者专用 - 切换到本地开发服务器 (http://localhost:3000)</html:small>
        </html:label>
      </html:div>
      <html:div class="form-group">
        <html:small style="color: #666;">💡 提示: 切换环境后,点击按钮或链接时会使用新环境地址</html:small>
      </html:div>
      <html:div class="form-group">
        <html:label class="checkbox-label">
          <html:input type="checkbox" id="enable-experimental-features" />
          <html:span>🧪 开放实验性功能(共享标注)</html:span>
          <html:small>启用测试中的共享标注功能,将在下一版本正式上线</html:small>
        </html:label>
      </html:div>
      <html:div class="form-group" style="display: flex; align-items: center; gap: 8px;">
        <html:label for="custom-api-url" style="flex-shrink: 0;">自定义 API 地址:</html:label>
        <html:input 
          type="text" 
          id="custom-api-url" 
          placeholder="https://your-custom-domain.com" 
          style="flex: 1; font-family: monospace; font-size: 12px;"
        />
      </html:div>
      <html:div class="form-group" style="display: flex; align-items: center; gap: 12px;">
        <html:button id="reset-api-url-btn" class="researchopia-btn" style="font-size: 12px; padding: 6px 12px;">
          重置为默认
        </html:button>
        <html:span id="current-api-display" style="color: #666; font-size: 12px; font-weight: 500;"></html:span>
      </html:div>
    </groupbox>

    <!-- 关于 -->
    <groupbox>
      <label><html:h2>ℹ️ 关于</html:h2></label>
      <html:div class="about-info">
        <html:div style="margin: 8px 0; display: flex; align-items: center;">
          <html:strong style="margin-right: 6px;">插件版本:</html:strong>
          <html:span id="researchopia-version">Loading...</html:span>
          <html:span style="margin: 0 8px;">|</html:span>
          <html:strong style="margin-right: 6px;">兼容版本:</html:strong>
          <html:span>Zotero 8 beta, Zotero 7</html:span>
        </html:div>
        <html:div style="margin: 8px 0; color: #666; font-size: 12px; font-style: italic;">
          💡 推荐使用 Zotero 8 beta 以获得最佳体验
        </html:div>
        <html:div style="margin: 8px 0; display: flex; align-items: center;">
          <html:strong style="margin-right: 6px;">官方网站:</html:strong>
          <html:a href="javascript:void(0)" onclick="Zotero.launchURL('https://www.researchopia.com/')" style="color: var(--accent-blue); text-decoration: none; cursor: pointer;">https://www.researchopia.com/</html:a>
        </html:div>
        <html:div style="margin: 8px 0; display: flex; align-items: center;">
          <html:strong style="margin-right: 6px;">项目主页:</html:strong>
          <html:a href="javascript:void(0)" onclick="Zotero.launchURL('https://github.com/occasional16/researchopia')" style="color: var(--accent-blue); text-decoration: none; cursor: pointer;">https://github.com/occasional16/researchopia</html:a>
        </html:div>
      </html:div>
    </groupbox>
  </groupbox>
</vbox>
